<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>Mega Menu 示例</title>
    <link rel="stylesheet" href="all.min.css" />
  </head>
  <body>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font-family: sans-serif;
        background: #f5f5f5;
      }

      .container {
        display: flex;
        width: 1200px;
        margin: 0 auto; /* 水平居中容器本身 */
        position: relative;
      }
      .container {
        display: flex;
        width: 1200px;
        margin: 0 auto;
        position: relative;
        /* 你现有的结构 */
      }
      .bottom-img {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: auto;
        z-index: -10;
        pointer-events: none;
      }
      /* 左侧导航栏 */
      .sidebar {
        width: 200px;
        background: #333;
        color: white;
        overflow-y: auto;
      }

      .nav-item {
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 1px solid #444;
      }

      .nav-item:hover,
      .nav-item.active {
        background-color: #007acc;
      }

      /* 子菜单容器 */
      .submenu {
        position: absolute;
        top: 0;
        left: 200px;
        width: 600px;
        background: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        display: none;
        padding: 20px;
        z-index: 100;
      }

      .submenu.show {
        display: block;
      }

      .submenu-columns {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
      }

      .submenu-section {
        width: 45%;
      }

      .submenu-section h4 {
        font-size: 15px;
        margin-bottom: 8px;
        color: #222;
      }

      .submenu-group {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 16px;
        margin-bottom: 16px;
      }

      .submenu-item {
        cursor: pointer;
        color: #007acc;
      }

      .submenu-item:hover {
        text-decoration: underline;
      }

      /* 图片区域 */
      .image-panel {
        flex: 1;
        padding: 20px;
        height: 500px;
        overflow-y: auto;
      }

      .image-panel h3 {
        margin-bottom: 10px;
      }

      .image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
      }

      .image-grid img {
        object-fit: cover;
        border: 1px solid #ccc;
        border-radius: 6px;
      }

      .yuansu1-grid-container {
        display: flex;
        flex-wrap: wrap;

        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto;
        margin-top: 20px; /* 或者设成一个较小的值，比如 10px */
      }

      .yuansu1-grid-item {
        width: calc(25% - 20px);
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        position: relative;
      }

      .yuansu1-grid-image {
        width: 100%;
        height: auto;
        object-fit: cover;
      }

      .yuansu1-view-link {
        position: absolute;
        left: 20px;
        bottom: 40px;
        color: #1890ff;
        text-decoration: none;
        font-size: 14px;
        background-color: rgba(255, 255, 255, 0.7);
        padding: 5px 10px;
        border-radius: 5px;
      }

      .yuansu1-view-link:hover {
        text-decoration: underline;
      }

      @media (max-width: 900px) {
        .yuansu1-grid-item {
          width: calc(50% - 15px);
        }
      }

      @media (max-width: 600px) {
        .yuansu1-grid-item {
          width: 100%;
        }
      }

      /* 品牌 */
      .brand-grid {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 6px;

        background-color: #f5f5f5;
        border-radius: 12px;
        max-width: 1200px;
        margin: auto;
      }

      .brand-item {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60px;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .brand-item img {
        max-height: 40px;
        max-width: 90%;
        object-fit: contain;
      }

      .brand-more {
        font-size: 12px;
        font-weight: bold;
        color: #333;
      }

      .bannercontainer {
        width: 1200px;
        margin: 0 auto; /* 水平居中容器本身 */
        position: relative;
        margin-top: 20px;
      }
      .header {
        display: flex;
        justify-content: space-between;
        padding: 10px 20px;
        background-color: #fff;
      }
      .header a {
        text-decoration: none;
        color: #666;
        font-size: 12px;
      }
      .banner {
        position: relative;

        background-color: #fff;
      }
      .main-image {
        top: 0;
        left: 0;
      }
      .wenzi001 {
        position: absolute;
        right: 200px;
        top: 100px;
        text-align: center;
      }

      .banner h2 {
        margin: 10px 0;
        font-size: 24px;
      }
      .banner button {
        padding: 10px 20px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
      }
      .products {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        background-color: #fff;
        margin-top: 10px;
        border-radius: 5px;
      }
      .product {
        text-align: center;
        width: 200px;
        margin: 10px;
      }
      .product img {
        max-width: 100%;
        height: auto;
      }
      .product h3 {
        font-size: 18px;
        margin: 10px 0;
      }
      .product p {
        color: #666;
        margin: 5px 0;
      }
      .product .price {
        color: #e60012;
        font-weight: bold;
      }

      .product-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 20px;
      }
      .product-card {
        flex: 1 1 calc(25% - 20px); /* 每行4列 */
        box-sizing: border-box;
        border: 1px solid #ddd;
        border-radius: 10px;
        padding: 15px;
        text-align: center;
        background: #fff;
        transition: box-shadow 0.3s;
      }

      .product-card:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .product-image {
        width: 100%;

        object-fit: cover;
        border-radius: 5px;
        margin-bottom: 10px;
      }

      .product-model {
        font-size: 16px;

        margin-bottom: 6px;
      }

      .product-subtitle {
        font-size: 14px;
        color: #666;
        margin-bottom: 8px;
      }

      .product-price {
        color: red;
        font-size: 16px;
        font-weight: bold;
      }
      .product-price span {
        color: black;
      }
      @media (max-width: 992px) {
        .product-card {
          flex: 1 1 calc(33.33% - 20px); /* 平板设备：3列 */
        }
      }

      @media (max-width: 768px) {
        .product-card {
          flex: 1 1 calc(50% - 20px); /* 手机横屏：2列 */
        }
      }

      @media (max-width: 480px) {
        .product-card {
          flex: 1 1 100%; /* 手机竖屏：1列 */
        }
      }

      .info-row {
        display: flex;

        border-radius: 8px;
        overflow: hidden;
        padding: 30px;
        background-color: #fff;
        width: 100%;
      }

      .info-col {
        flex: 1;
        display: flex;
        justify-content: center; /* 关键：水平居中整块内容 */
        align-items: center;
        padding: 0 12px;
        box-sizing: border-box;
      }

      .info-col + .info-col {
        border-left: 1px solid #ccc;
      }

      .info-icon {
        font-size: 30px;
        color: #007bff;
        margin-right: 30px;
        flex-shrink: 0;
      }

      .info-text {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
      }

      .info-title {
        font-size: 25px;
        font-weight: bold;
        color: #007bff;
      }

      .info-subtitle {
        margin-top: 10px;
        font-size: 15px;
        color: #666;
      }
    </style>
    <div class="container" id="menu-area">
      <!-- 左侧导航栏 -->
      <div class="sidebar" id="sidebar">
        <div class="nav-item" data-category="surgery">手术科</div>
        <div class="nav-item" data-category="imaging">功能检查</div>
        <div class="nav-item" data-category="material">医用耗材</div>
        <div class="nav-item" data-category="emergency">急救系统</div>
        <div class="nav-item" data-category="lab">实验仪器</div>
        <div class="nav-item" data-category="rehab">康复理疗</div>
        <div class="nav-item" data-category="icu">重症监护</div>
        <div class="nav-item" data-category="neuro">神经外科</div>
        <div class="nav-item" data-category="ortho">骨科器械</div>
        <div class="nav-item" data-category="ent">耳鼻喉科</div>
      </div>

      <!-- 子菜单 -->
      <div class="submenu" id="submenu">
        <div class="submenu-columns" id="submenu-content">
          <!-- JS 注入 -->
        </div>
      </div>

      <!-- 图片区域 -->
      <div class="image-panel">
        <div class="image-grid" id="image-grid"></div>
      </div>

      <img src="1.png" class="bottom-img" />
    </div>
    <div class="yuansu1-grid-container">
      <div class="yuansu1-grid-item">
        <img src="002.png" alt="Open vip" class="yuansu1-grid-image" />
        <a href="#" class="yuansu1-view-link">立即查看 ></a>
      </div>
      <div class="yuansu1-grid-item">
        <img src="002.png" alt="Open vip" class="yuansu1-grid-image" />
        <a href="#" class="yuansu1-view-link">立即查看 ></a>
      </div>
      <div class="yuansu1-grid-item">
        <img src="002.png" alt="Open vip" class="yuansu1-grid-image" />
        <a href="#" class="yuansu1-view-link">立即查看 ></a>
      </div>
      <div class="yuansu1-grid-item">
        <img src="002.png" alt="Open vip" class="yuansu1-grid-image" />
        <a href="#" class="yuansu1-view-link">立即查看 ></a>
      </div>
    </div>
    <div class="brand-grid">
      <!-- 第一行7个 -->
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌1" /></div>

      <!-- 第二行6个 + 最后一个为“更多品牌 >>>” -->
      <div class="brand-item"><img src="003.png" alt="品牌8" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌8" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌8" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌8" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌8" /></div>
      <div class="brand-item"><img src="003.png" alt="品牌8" /></div>

      <div class="brand-item brand-more">更多品牌 &gt;&gt;&gt;</div>
    </div>

    <div class="bannercontainer">
      <div class="header">
        <span>手术外科</span>
        <a href="#">查看更多 >></a>
      </div>

      <div class="banner">
        <img src="004.png" alt="双火虫 GL-Fly2 产品图片" class="main-image" />
        <div class="wenzi001">
          <h2>双火虫 GL-Fly2</h2>
          <h3>高精度光学 優質航系統</h3>
          <button
            style="
              background-color: #eeeeee;
              color: black;
              border: none;
              padding: 10px 20px;
              border-radius: 5px;
            "
          >
            查看更多
          </button>
        </div>
      </div>

      <div class="product-grid">
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>

        <!-- 可继续添加更多卡片 -->
      </div>
    </div>
    <div class="bannercontainer">
      <div class="header">
        <span>高值耗材</span>
        <a href="#">查看更多 >></a>
      </div>

      <div class="banner">
        <img src="004.png" alt="双火虫 GL-Fly2 产品图片" class="main-image" />
        <div class="wenzi001">
          <h2>双火虫 GL-Fly2</h2>
          <h3>高精度光学 優質航系統</h3>
          <button
            style="
              background-color: #eeeeee;
              color: black;
              border: none;
              padding: 10px 20px;
              border-radius: 5px;
            "
          >
            查看更多
          </button>
        </div>
      </div>

      <div class="product-grid">
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>
        <div class="product-card">
          <img class="product-image" src="005.png" alt="产品图片" />
          <div class="product-model">型号 B456</div>
          <div class="product-subtitle">副标题内容示例</div>
          <div class="product-price"><span> 市场价:</span> 1399万</div>
        </div>

        <!-- 可继续添加更多卡片 -->
      </div>
    </div>

    <div class="yuansu1-grid-container">
      <div class="info-row">
        <div class="info-col">
          <div class="info-content" style="display: flex; align-items: center">
            <i class="fas fa-user info-icon"></i>
            <div class="info-text">
              <div class="info-title">正品保证</div>
              <div class="info-subtitle">正品保证,非常牛逼</div>
            </div>
          </div>
        </div>
        <div class="info-col">
          <div class="info-content" style="display: flex; align-items: center">
            <i class="fas fa-user info-icon"></i>
            <div class="info-text">
              <div class="info-title">正品保证</div>
              <div class="info-subtitle">正品保证,非常牛逼</div>
            </div>
          </div>
        </div>
        <div class="info-col">
          <div class="info-content" style="display: flex; align-items: center">
            <i class="fas fa-user info-icon"></i>
            <div class="info-text">
              <div class="info-title">正品保证</div>
              <div class="info-subtitle">正品保证,非常牛逼</div>
            </div>
          </div>
        </div>
        <div class="info-col">
          <div class="info-content" style="display: flex; align-items: center">
            <i class="fas fa-user info-icon"></i>
            <div class="info-text">
              <div class="info-title">正品保证</div>
              <div class="info-subtitle">正品保证,非常牛逼</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div
        style="
          height: 2px;
          background-color: #ccc;
          width: 98%;
          margin: 20px auto;
        "
      ></div>
    </div>

    <script>
      const navData = {
        surgery: {
          基础器械: ["手术刀", "剪刀", "止血钳", "缝合针", "手术钳", "镊子"],
          显微外科: ["显微镜", "操作臂", "显微器械", "显微台"],
          手术设备: ["注射泵", "电刀", "无影灯", "麻醉机", "呼吸机"],
          手术消毒: ["洗手池", "紫外线灯", "消毒柜", "清洗机"],
        },
        imaging: {
          X射线: ["拍片机", "移动DR", "骨密度仪", "数字X光机"],
          超声: ["黑白超", "彩超", "心脏超声", "探头", "便携超声"],
          CT: ["16排CT", "64排CT", "128排CT", "CT配件"],
          MRI: ["1.5T MRI", "3T MRI", "磁共振床", "注射泵"],
        },
        material: {
          一次性耗材: [
            "注射器",
            "输液器",
            "导尿管",
            "留置针",
            "采血管",
            "冲洗器",
          ],
          敷料: ["纱布", "绷带", "创口贴", "压脉带", "止血棉"],
          防护: ["手术衣", "隔离服", "面罩", "防护镜"],
        },
        emergency: {
          基础急救: ["心肺复苏仪", "氧气瓶", "急救包", "急救担架"],
          电气急救: ["电击除颤仪", "止血带", "血压计", "吸痰器"],
        },
        lab: {
          分析仪器: ["血液分析仪", "尿液分析仪", "生化仪", "离心机"],
          实验配件: ["试管架", "滴定管", "试剂瓶", "烧杯"],
        },
        rehab: {
          理疗仪器: ["红外理疗", "磁疗", "电刺激", "超声波治疗仪"],
          康复辅助: ["步行辅助器", "轮椅", "助行器", "功能训练器"],
        },
        icu: {
          监护设备: ["心电监护仪", "血氧仪", "呼吸机", "输液泵"],
          生命支持: ["除颤器", "高流量呼吸机", "麻醉机"],
        },
        neuro: {
          神经设备: ["脑电图机", "神经探测仪", "微创手术工具"],
          定位辅助: ["术中导航", "影像配准", "神经刺激仪"],
        },
        ortho: {
          骨科器械: ["拉钩", "锯刀", "打钉枪", "骨锤", "钢板", "螺钉"],
          矫形辅助: ["矫形支架", "髋关节模具", "石膏绷带"],
        },
        ent: {
          耳鼻喉设备: ["耳镜", "鼻镜", "喉镜", "电凝设备", "吸引器"],
          检查配件: ["压舌板", "检查灯", "喉钳"],
        },
      };

      const images = {};
      for (const cat of Object.values(navData)) {
        for (const items of Object.values(cat)) {
          for (const item of items) {
            images[
              item
            ] = `https://via.placeholder.com/150x100?text=${encodeURIComponent(
              item
            )}`;
          }
        }
      }

      const sidebar = document.getElementById("sidebar");
      const submenu = document.getElementById("submenu");
      const submenuContent = document.getElementById("submenu-content");
      const imageGrid = document.getElementById("image-grid");

      sidebar.addEventListener("mouseover", (e) => {
        const item = e.target.closest(".nav-item");
        if (item) {
          const category = item.dataset.category;
          renderSubmenu(category);
        }
      });

      document.addEventListener("click", (event) => {
        // 判断点击的目标是否在 submenu 内部
        if (!submenu.contains(event.target)) {
          //  imageGrid.innerHTML = ""; // 清空现有的图片
          submenu.classList.remove("show");
          //   document.querySelector(".image-panel").style.backgroundColor = ""; // 你想要的颜色
        }

        if (
          !submenu.contains(event.target) &&
          !document.querySelector(".image-panel").contains(event.target)
        ) {
          imageGrid.innerHTML = ""; // 清空现有的图片

          document.querySelector(".image-panel").style.backgroundColor = ""; // 你想要的颜色
        }
      });
      // 渲染子菜单
      function renderSubmenu(category) {
        submenuContent.innerHTML = ""; // 清空当前的子菜单内容

        const group = navData[category]; // 获取分类对应的数据

        // 找到当前对应的导航项
        const activeItem = sidebar.querySelector(
          `[data-category="${category}"]`
        );
        if (activeItem) {
          const sidebarRect = sidebar.getBoundingClientRect();
          const itemRect = activeItem.getBoundingClientRect();

          // 设置 submenu 的 top，使其与左侧导航栏对齐
          submenu.style.top = `${itemRect.top - sidebarRect.top}px`;
        }

        for (const title in group) {
          const section = document.createElement("div");
          section.className = "submenu-section";
          section.innerHTML = `<h4>${title}</h4>`;
          const groupEl = document.createElement("div");
          groupEl.className = "submenu-group";
          group[title].forEach((item) => {
            const el = document.createElement("span");
            el.className = "submenu-item";
            el.textContent = item;
            el.onclick = () => {
              showImages(category); // 点击分类时，传递整个分类名（如 'surgery'）
              submenu.classList.remove("show");
            };
            groupEl.appendChild(el);
          });
          section.appendChild(groupEl);
          submenuContent.appendChild(section);
        }

        submenu.classList.add("show");
      }

      // 显示图片函数
      function showImages(category) {
        /* 图片区域 */
        document.querySelector(".image-panel").style.backgroundColor = "#fff"; // 你想要的颜色

        imageGrid.innerHTML = ""; // 清空现有的图片

        const group = navData[category]; // 获取当前分类的数据

        // 遍历所有产品，展示图片和名称
        for (const title in group) {
          group[title].forEach((item) => {
            const img = images[item]; // 获取每个产品的图片

            if (img) {
              const wrapper = document.createElement("div");
              wrapper.style.display = "flex";
              wrapper.style.flexDirection = "column";
              wrapper.style.alignItems = "center";

              const el = document.createElement("img");
              el.src = "QQ_1745058435836.png"; // 使用产品对应的图片
              el.style.width = "150px";
              el.style.objectFit = "cover";
              el.style.border = "1px solid #ccc";
              el.style.borderRadius = "6px";

              const label = document.createElement("div");
              label.textContent = item; // 显示产品名称
              label.style.marginTop = "8px";
              label.style.fontSize = "14px";
              label.style.color = "#333";
              label.style.textAlign = "center";

              wrapper.appendChild(el);
              wrapper.appendChild(label);
              imageGrid.appendChild(wrapper);
            }
          });
        }
      }
    </script>
  </body>
</html>
